<template>
  <div class="applyallocation">
    <div class="top"></div>
    <!--<mt-header title="申请调拨"  class='head'>
			  <router-link to="/home" slot="left">
			     <i class="material-icons left_1" style="color: #fff;">chevron_left</i>
			  </router-link>
			</mt-header>-->
    <x-header class='head' :left-options="{backText: ''}">申请调拨</x-header>

    <!--<scroller>-->
    <div class="kong"></div>

    <div class="apply">
      <div class="apply-c">
        <div class="apply-title">
          申请明细
        </div>

        <group gutter='0px'>
          <popup-picker class='popup' title="申请单位" :data="list1" v-model="value1" @on-show="onShow" @on-hide="onHide" @on-change="leixing" placeholder="请选择申请单位"></popup-picker>
          <popup-picker class='popup' title="申请部门" :data="list2" v-model="value2" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择申请部门"></popup-picker>
          <cell class='popup' title="联系人姓名" value="name">
            <router-link :to="{path:'/xzcontact'}" style='color: #999;'>{{this.name||'请选择联系人'}}</router-link>
          </cell>
          <x-input class='popup' title="联系人电话" v-model="value4" placeholder="请输入联系人电话"></x-input>
          <cell class='popup' title="工程项目" value="value5">
            <router-link :to="{path:'/engineer'}" style='color: #999;'>{{this.$route.params.pro||'请选择工程项目'}}</router-link>
          </cell>
          <x-textarea class='popup' title="项目地址:" placeholder='地址' v-model="adress"></x-textarea>
          <datetime class='popup' v-model="valuedata" @on-change="change" title="要求到货时间" placeholder="请选择到货时间"></datetime>
          <x-textarea class='popup' title="备注:" placeholder='备注' v-model="remarks"></x-textarea>
        </group>

      </div>
    </div>

    <div class="info">
      <p class="_xian">设备信息
        <span>
          <button class="remove ">删除</button>
        </span>
      </p>
      <div class="info-c">

        <p class="hui">设备类型：
          <i class="hei">主机</i>
        </p>
        <span class="hui">设备名称：
          <i class="lan">塔式起重</i>
        </span>
        <p class="hui">主机型号：
          <i class="lan">PY67899977</i>
        </p>
        <span class="hui">物料号：
          <i class="lan">13412412</i>
        </span>
        <p class="hui">设备单位：
          <i class="hei">台</i>
        </p>
        <span class="hui">申请数量：
          <i class="lan">2</i>
        </span>
        <i class="hui">备注：
          <i class="hei">其二企鹅的全额返还我姐夫你问</i>
        </i>
      </div>
    </div>

    <router-link :to="{path:'/addequip'}" style='color: #000;'>
      <div class="info btn">
        <button class="add">+添加</button>
      </div>
    </router-link>

    <div style="height: 6rem;"></div>
    <!--</scroller>-->

    <button class="queren" @click='apply()'>申请</button>

  </div>
</template>

<script>
import PopupPicker from 'vux/src/components/Popup-picker/index'
import Group from 'vux/src/components/group/index'
import XInput from 'vux/src/components/x-input/index'
import XTextarea from 'vux/src/components/x-textarea/index'
import Datetime from 'vux/src/components/datetime/index'
import { Cell, XHeader } from 'vux'
import { actApply } from '@/service/getdata'
export default {
  components: {
    PopupPicker,
    Group,
    XInput,
    XTextarea,
    Datetime,
    Cell,
    XHeader,
  },
  mounted() {},
  methods: {
    leixing(val) {
      console.log('val change', val)
      localStorage.setItem('leixinga', val)
    },
    onChange(val) {
      console.log('val change', val)
      localStorage.clear()
    },
    change(value) {
      console.log('change', value)
    },
    onShow() {
      console.log('on show')
    },
    onHide(type) {
      console.log('on hide', type)
    },
    apply() {
      // 调拨申请假数据测试
      actApply(
        this.token,
        this.userId,
        1,
        1,
        1,
        15560122810,
        1,
        112,
        20170101,
        1111,
        [
          {
            deviceType: 1,
            deviceName: '主 机',
            deviceUnit: 1,
            applyCount: 1,
            applyText: '我是备注',
          },
        ],
      ).then((res) => {
        console.log(res)
      })
    },
  },
  data() {
    return {
      userId: localStorage.userId,
      token: localStorage.token,
      leixingv: [],
      name: localStorage.id,
      project: this.$route.params.pro,
      value: '',
      valuedata: '',
      value1: localStorage.leixinga ? [localStorage.leixinga] : [],
      value2: [],
      value3: [],
      value4: '',
      value5: [],
      adress: '',
      remarks: '',
      list1: [['主机', '主机配件', '111', '222', '333']],
      list2: [['主机', '主机配件', '111', '222', '333']],
      list3: [['主机', '主机配件', '111', '222', '333']],
      list4: [['主机', '主机配件', '111', '222', '333']],
      phone: '',
    }
  },
}
</script>
</script>

<style scoped>
.applyallocation {
  height: 100%;
}
.apply {
  width: 94%;
  margin-left: 3%;
  background: #fff;
  margin-top: 0.5rem;
  border-radius: 6px;
  min-height: 24.2rem;
}
.apply-title {
  line-height: 2rem;
  font-size: 0.8rem;
  padding-left: 15px;
  background: #f8f6f7;
  border-radius: 6px 6px 0 0;
}
.choice {
  height: 2rem;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
  padding-left: 0.5rem;
}
.choice-c span {
  line-height: 2rem;
  font-size: 0.8rem;
  display: inline-block;
  width: 40%;
  float: left;
  height: 2rem;
}
.choice-i span {
  width: 42.4%;
  line-height: 2rem;
  font-size: 0.8rem;
  display: inline-block;
  float: left;
  height: 2rem;
}
.choice-k {
  width: 60%;
  float: right;
  line-height: 2rem;
  height: 2rem;
  border: none;
  color: #606063;
  font-size: 0.8rem !important;
}
.choice-k option {
  font-size: 0.8rem;
}
/*.choice-c input{width: 57.6%;float: left;height: 2rem;color: #606063;border: none;font-size: .8rem!important;line-height: 2rem;}*/
.choice-i input {
  width: 57.6%;
  float: left;
  height: 2rem;
  color: #606063;
  border: none;
  font-size: 0.8rem !important;
  line-height: 2rem;
}
.adress {
  height: 4.5rem;
}
.info {
  width: 94%;
  margin-left: 3%;
  background: #fff;
  margin-top: 0.5rem;
  border-radius: 6px;
  min-height: 1rem;
}
.info-c {
  padding: 0.5rem;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.8rem;
}
.info-c p {
  display: inline-block;
  width: 50%;
  line-height: 1.8rem;
  float: left;
}
.info-c span {
  display: inline-block;
  width: 50%;
  height: 1.8rem;
}
.info-c b {
  font-weight: 500;
}
.remove {
  width: 4rem;
  background: #ff9800;
  color: #fff;
  border: none;
  height: 1.5rem;
  border-radius: 4px;
  line-height: 1.8rem;
  float: right;
}
.add {
  width: 100%;
  height: 2.5rem;
  border-radius: 6px;
  border: none;
  background: #fff;
  color: #03a9f4;
}
.btn {
  margin-top: 1rem;
}
.queren {
  width: 100%;
  height: 2.5rem;
  position: fixed;
  bottom: 0;
  background: #4a82c6;
  color: #fff;
  border: none;
}
.hui {
  color: #666;
}
.hei {
  color: #606063;
}
.lan {
  color: #1e82d2;
}
._xian {
  border-bottom: 1px dashed #d5d5d5;
  line-height: 1.8rem;
  padding: 0.5rem 0.5rem 0 0.5rem;
  font-size: 0.8rem;
}
.top {
  z-index: 9999999;
}
.head {
  z-index: 9999999;
}
.top {
  position: fixed;
  top: 0;
  width: 100%;
  height: 1.25rem;
  background: #1e82d2;
}
.head {
  position: fixed;
  top: 1.25rem;
  width: 100%;
  background: #1e82d2;
  font-size: 1.125rem;
  height: 3rem;
}
.kong {
  height: 4.25rem;
}
.text {
  float: left;
  width: 58.5%;
  border: none;
  font-size: 0.8rem !important;
  color: #606063;
  padding-top: 0.5rem;
}
input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
}
.popup {
  font-size: 0.8rem !important;
  color: #606063 !important;
}
.weui-cells:after {
  display: none !important;
  border: 0 !important;
}
</style>